import React from 'react';
import { obj_float, is_empty, obj_str } from 'sui';
import { split_psn } from 'client/pick/cmd';

const is_range = (opt, k1, k2, v) => {
    let min = obj_str(opt, k1);
    let max = obj_str(opt, k2);

    if (!min || !max) {
        return false;
    }

    min = Math.trunc(parseFloat(min) * 1000);
    max = Math.trunc(parseFloat(max) * 1000);

    const tmp = Math.trunc(parseFloat(v) * 1000);

    return tmp >= min && tmp <= max;
};

const ck_range = (opt, v) => {
    const dia = obj_float(v, "dia");
    const dt = obj_float(v, "dt");
    const width = obj_float(v, "width");

    if (is_range(opt, "dia_min", "dia_max", dia) && is_range(opt, "dt_min", "dt_max", dt) && is_range(opt, "w_min", "w_max", width)) {
        return true;
    }

    return false;
};

const StepView = ({ umd, opt }) => {
    const getVal = (d) => {
        let dia = obj_str(d, "dia");
        let dt = obj_str(d, "dt");
        let width = obj_str(d, "width");

        return [dia, dt, width];
    };

    const getMsn = () => {
        const info = umd.info;
        if (is_empty(info)) {
            return null;
        }

        const ret = [];

        info.forEach(d => {
            const sn = obj_str(d, "sn");
            const pos = obj_str(d, "pos");

            const [dia, dt, width] = getVal(d);

            let st = "bg-blue-500";

            if (ck_range(opt, d)) {
                st = "bg-green-500";
            }

            ret.push(
                <div key={sn} className={`flex flex-col m-2 ${st}`}>
                    <div className="text-base w-40 text-center">{split_psn(sn)}</div>
                    <div className="text-base w-40 text-center">{pos}</div>
                    <div className="text-base w-40 text-center text-white">直径<span className="ml-2">{dia}</span></div>
                    <div className="text-base w-40 text-center text-white">沟径<span className="ml-2">{dt}</span></div>
                    <div className="text-base w-40 text-center text-white">宽度<span className="ml-2">{width}</span></div>
                </div>
            );
        });

        return ret;
    };

    return (
        <div className="flex h-full overflow-y-auto">
            <div className="flex flex-wrap content-start">
                {getMsn()}
            </div>
        </div>
    );
};

export {ck_range, StepView};
